<template>
  <div class="line-chart-container">
    <div class="chart-header">
      <div class="header-icon">📈</div>
      <div class="header-title">{{ title }}</div>
      <div class="refresh-btn" @click="refreshData">⟳</div>
    </div>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

interface DataPoint {
  name: string
  value: number
  color?: string
}

interface Props {
  title: string
  data: DataPoint[]
  height?: string
  showAnimation?: boolean
  smooth?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  height: '100%',
  showAnimation: true,
  smooth: true
})

const emit = defineEmits<{
  refresh: []
}>()

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.data.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: 'rgba(100, 255, 218, 0.3)',
          width: 1
        }
      },
      axisTick: {
        lineStyle: {
          color: 'rgba(100, 255, 218, 0.3)'
        }
      },
      axisLabel: {
        color: '#8892a0',
        fontSize: '0.8vw',
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#8892a0',
        fontSize: '0.8vw',
        formatter: (value: number) => {
          if (value >= 1000000) {
            return (value / 1000000).toFixed(1) + 'M'
          } else if (value >= 1000) {
            return (value / 1000).toFixed(1) + 'K'
          }
          return value.toString()
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(100, 255, 218, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '趋势',
        type: 'line',
        data: props.data.map(item => item.value),
        smooth: props.smooth,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#06b6d4' },
            { offset: 0.5, color: '#0891b2' },
            { offset: 1, color: '#9d4edd' }
          ]),
          width: 3,
          shadowBlur: 10,
          shadowColor: 'rgba(6, 182, 212, 0.3)'
        },
        itemStyle: {
          color: '#06b6d4',
          borderColor: '#ffffff',
          borderWidth: 2,
          shadowBlur: 8,
          shadowColor: 'rgba(6, 182, 212, 0.5)'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(6, 182, 212, 0.3)' },
            { offset: 1, color: 'rgba(6, 182, 212, 0.05)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: '#9d4edd',
            borderColor: '#ffffff',
            borderWidth: 3,
            shadowBlur: 15,
            shadowColor: 'rgba(157, 78, 221, 0.8)'
          }
        },
        animationDelay: 0,
        animationDuration: 2000,
        animationEasing: 'cubicOut'
      }
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(17, 34, 64, 0.9)',
      borderColor: '#64ffda',
      borderWidth: 1,
      textStyle: {
        color: '#e6e6e6',
        fontSize: '0.8vw'
      },
      formatter: (params: any) => {
        const data = params[0]
        return `
          <div style="padding: 0.5vw;">
            <div style="font-size: 1vw; color: #64ffda; margin-bottom: 0.3vw;">${data.name}</div>
            <div style="font-size: 1.5vw; color: #06b6d4; font-weight: bold;">${data.value}</div>
            <div style="font-size: 0.8vw; color: #8892a0;">医美机构数量</div>
          </div>
        `
      }
    }
  }

  chartInstance.setOption(option)

  // 添加点击事件
  chartInstance.on('click', (params) => {
    console.log('Line clicked:', params)
  })

  // 窗口大小变化时重新调整
  window.addEventListener('resize', handleResize)
}

const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

const refreshData = () => {
  emit('refresh')
}

// 监听数据变化
watch(() => props.data, () => {
  if (chartInstance) {
    const option = {
      xAxis: {
        data: props.data.map(item => item.name)
      },
      series: [{
        data: props.data.map(item => item.value)
      }]
    }
    chartInstance.setOption(option, true)
  }
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    initChart()
  })
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.line-chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(17, 34, 64, 0.4);
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 0.5vw;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;
}

.line-chart-container:hover {
  border-color: rgba(157, 78, 221, 0.5);
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

.chart-header {
  display: flex;
  align-items: center;
  padding: 0.8vw 1vw;
  background: rgba(17, 34, 64, 0.4);
  border-bottom: 1px solid rgba(100, 255, 218, 0.2);
}

.header-icon {
  font-size: 1.2vw;
  margin-right: 0.5vw;
  filter: drop-shadow(0 0 4px #64ffda);
}

.header-title {
  flex: 1;
  font-size: 1.1vw;
  color: #e6e6e6;
  font-weight: 500;
}

.refresh-btn {
  width: 1.5vw;
  height: 1.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 50%;
  color: #64ffda;
  cursor: pointer;
  font-size: 0.8vw;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  background: rgba(100, 255, 218, 0.2);
  transform: rotate(180deg);
  box-shadow: 0 0 8px rgba(100, 255, 218, 0.5);
}

.chart-content {
  width: 100%;
  height: calc(100% - 3.5vw);
}

/* 响应式调整 */
@media (max-width: 1366px) {
  .header-title {
    font-size: 0.9vw;
  }
  .header-icon {
    font-size: 1vw;
  }
}

@media (min-width: 2560px) {
  .header-title {
    font-size: 1.3vw;
  }
  .header-icon {
    font-size: 1.4vw;
  }
}
</style>
